<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>菜单管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        菜单名：
        <a-input placeholder="请输入" v-model="queryForm.menuName" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>菜单列表</div>
        <a-button type="primary" @click="addFn" v-hasPermi="['menu:add']"
          >添加</a-button
        >
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          childrenColumnName="childList"
          default-expand-all
          :pagination="false"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="addFn(text, record)" v-hasPermi="['menu:add']">新增</a>
            <a-divider type="vertical" />
            <a @click="editFn(text, record)" v-hasPermi="['menu:edit']">修改</a>
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              class="red"
              v-hasPermi="['menu:del']"
              >删除</a
            >
          </span>
        </a-table>
        <!-- <div class="page_box">
          <a-pagination v-model="queryForm.offset"
                        :page-size-options="[ '20', '30', '40', '50']"
                        :total="total"
                        show-size-changer
                        :page-size="queryForm.current"
                        @showSizeChange="onShowSizeChange"
                        @change="pageChange"></a-pagination>
        </div> -->
      </a-spin>
    </a-row>
    <a-modal
      title="菜单配置"
      :visible="dialogVisible"
      width="38%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="putMenu"
    >
      <a-form :form="form">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="菜单名称"
        >
          <a-input
            v-decorator="[
              'menuName',
              { rules: [{ required: true, message: '请菜单名称' }] },
            ]"
            placeholder="请菜单名称"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="菜单类型"
        >
          <a-select
            v-decorator="[
              'menuType',
              { rules: [{ required: true, message: '请选择菜单类型' }] },
            ]"
            placeholder="请选择菜单类型"
          >
            <a-select-option
              v-for="(item, index) in menuTypeList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="顺序"
        >
          <a-input
            type="number"
            v-decorator="[
              'orderNum',
              { rules: [{ required: true, message: '请输入顺序' }] },
            ]"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="路由路径"
        >
          <a-input
            v-decorator="[
              'url',
              { rules: [{ required: true, message: '请输入路由路径' }] },
            ]"
            placeholder="请输入路由路径"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="文件地址"
        >
          <a-input
            v-decorator="[
              'fileUrl',
              { rules: [{ required: true, message: '请输入文件地址' }] },
            ]"
            placeholder="请输入文件地址"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="是否隐藏"
        >
          <a-radio-group v-decorator="['isHideen']">
            <a-radio :value="0"> 是 </a-radio>
            <a-radio :value="1"> 否 </a-radio></a-radio-group
          >
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="备注"
        >
          <a-input v-decorator="['remark']" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="选中图标"
        >
          <Upload
            :imageUrl="checkIconUrl"
            @getImg="getImgW"
            :limit="1"
          ></Upload>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="未选中图标"
        >
          <Upload :imageUrl="outIconUrl" :limit="1" @getImg="getImgW2"></Upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import qs from "qs"; // 需要安装并引入 qs
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import Upload from "@/component/upload/index.vue";

export default {
  components: {
    Upload,
  },
  data() {
    return {
      checkIconUrl: "", //图标
      outIconUrl: "", //未选中图标
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      id: null,
      parentId: null,
      tableData: [],
      columns: [
        {
          title: "菜单名称",
          dataIndex: "menuName",
          key: "menuName",
        },
        {
          title: "路由路径",
          dataIndex: "url",
          key: "url",
        },
        {
          title: "文件路径",
          dataIndex: "fileUrl",
          key: "fileUrl",
        },
        {
          title: "是否显示",
          dataIndex: "isHiddenName",
          key: "isHiddenName",
        },
        {
          title: "顺序",
          dataIndex: "orderNum",
          key: "orderNum",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      menuTypeList: [
        { label: "目录", value: "M" },
        { label: "菜单", value: "C" },
        { label: "按钮", value: "F" },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      const url = "/government-platform-center/menu";
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.getOther(this.tableData);
            this.loading = false;
          }
        });
    },
    cleanQuery() {
      this.queryForm = {};
      this.getList();
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    getOther(list) {
      list.forEach((item, index) => {
        item = { ...item, ...item.thisData };
        if (item.isHideen == 0) {
          item["isHiddenName"] = "隐藏";
        }
        if (item.isHideen == 1) {
          item["isHiddenName"] = "显示";
        }
        item["key"] = item.id;
        if (item.childList.length == 0) {
          item.childList = null;
        }
        this.$set(list, index, item);
        if (item.childList && item.childList.length > 0) {
          this.getOther(item.childList);
        }
      });
    },
    editFn(text, record) {
      this.dialogVisible = true;
      this.outIconUrl = "";
      this.checkIconUrl = "";
      console.log("Dagnqi", this.outIconUrl);
      const url = `/government-platform-center/menu/${text.id}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.form.setFieldsValue(res.data.data);
          this.outIconUrl = res.data.data.outIconUrl;
          this.checkIconUrl = res.data.data.checkIconUrl;

          this.id = res.data.data.menuId;
        }
      });
    },
    delFn(text, record) {
      console.log(text, record);
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/menu/deleteById`;
          const data = qs.stringify({ id: text.id });
          that.$axios.post(url, data).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("操作成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    addFn(text, record) {
      if (text) {
        this.parentId = text.id;
      } else {
        this.parentId = null;
      }
      this.dialogVisible = true;
      this.outIconUrl = "";
      this.checkIconUrl = "";
      this.form.resetFields();
      this.id = null;
    },
    putMenu() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (!this.id) {
          const url = "/government-platform-center/menu";
          if (this.parentId == null) {
            var form = {
              ...values,
              outIconUrl: this.outIconUrl,
              checkIconUrl: this.checkIconUrl,
            };
          } else {
            var form = { ...values, parentId: this.parentId };
          }
          this.$axios
            .post(url, form, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList();
                this.dialogVisible = false;
                message.success("操作成功");
              }
            });
        } else {
          const url = "/government-platform-center/menu/edit";
          const form = {
            ...values,
            menuId: this.id,
            outIconUrl: this.outIconUrl,
            checkIconUrl: this.checkIconUrl,
          };
          const data = qs.stringify(form);
          this.$axios.post(url, data).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.dialogVisible = false;
              message.success("操作成功");
            }
          });
        }
      });
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
    // 上传图片
    getImgW(e) {
      this.checkIconUrl = e;
      console.log(e, "e");
    },
    getImgW2(e) {
      this.outIconUrl = e;
      console.log(e, "e");
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
